<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增进度计划信息')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<style>
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

</style>
<body>
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="dv">
    <form class="form-horizontal m" id="form-progress-add">
        <input type="hidden" id="progressId" name="progressId" th:value="${progress.progressId}"/>
        <input name="companyId" type="hidden" id="companyId"/>
        <input name="programId" type="hidden" id="programId"/>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>楼栋号：</label>
                    <div class="col-sm-8">
                        <select id="buildingNumber" name="buildingNumber" class="form-control">
                            <option th:each="buildingNumber : ${buildingNumber}" th:text="${buildingNumber.name}"
                                    th:value="${buildingNumber.id}"
                                    th:selected="${buildingNumber.id == progress.building}"></option>
                        </select>
                    </div>
                </div>

            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>总楼层：</label>
                    <div class="col-sm-8">
                        <select id="floorNumber" name="floorNumber" class="form-control noselect2">
                            <option value="">请选择</option>
                            <option th:each="floorNumber : ${floorNumber}" th:text="${floorNumber.dictValue}"
                                    th:value="${floorNumber.dictCode}"
                                    th:selected="${floorNumber.dictCode == progress.floorNumber}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group" style="display: none">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>是否为关键线路:</label>
                    <div class="col-sm-8">

                        <select id="isMainPath" name="isMainPath" class="form-control noselect2">
                            <option value="">请选择</option>
                            <option value="1">否</option>
                            <option value="0" selected>是</option>
                        </select>

                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>批次:</label>
                    <div class="col-sm-8">

                        <select id="batch" name="batch" class="form-control noselect2">
                            <option value="">请选择</option>
                            <option value="0">第一批次</option>
                            <option value="1">第二批次</option>
                            <option value="2">第三批次</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>节点名称：</label>
                    <div class="col-sm-8">
                        <select id="node" name="node" class="form-control noselect2">
                            <option th:each="node : ${node}" th:text="${node.dictValue}" th:value="${node.dictCode}"
                                    th:selected="${node.dictCode == progress.nodeId}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>计划开始时间：</label>
                    <div class="col-sm-8">
                        <input type="text" name="planStartTime" id="planStartTime" class="form-control"
                               placeholder="yyyy-MM-dd" th:value="${progress.planStartTime}"/>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>计划完成时间：</label>
                    <div class="col-sm-8">
                        <input type="text" name="planEndTime" id="planEndTime" class="form-control"
                               placeholder="yyyy-MM-dd" th:value="${progress.planEndTime}"/>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group" style="display: none">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>计划完成时间：</label>
                    <div class="col-sm-8">
                        <input type="text" name="planEndTimeOld" id="planEndTimeOld" class="form-control"
                               placeholder="yyyy-MM-dd" th:value="${progress.planEndTime}"/>
                    </div>
                </div>
            </div>
        </div>


        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">备注：</label>
                    <div class="col-sm-8">
                        <textarea id="note" name="note" placeholder="如计划调整请备注"
                                  class="form-control">[[${progress.note}]]</textarea>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: select2-js"/>

<script th:inline="javascript">

    var prefix = ctx + 'progressplan';
    var companyId = [[${progress.companyId}]];
    var programId = [[${progress.programId}]];
    var batch = [[${progress.batch}]];
    $("#companyId").val(companyId);
    $("#programId").val(programId);


    $("input[name$='planEndTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true,
        pickerPosition: 'bottom-right'
    });

    $("input[name$='planStartTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true,
        pickerPosition: 'bottom-right'
    });

    // $("#isMainPath").find("option[value="+ isMainPath +"]").attr("selected",true);
    $("#batch").find("option[value="+ batch +"]").attr("selected",true);

    $("#buildingNumber").change(function () {
        buildingNumber = $("#buildingNumber").val();
        $.ajax({
            url: prefix + '/selectFloorNumber?companyId=' + companyId + '&proId=' + programId + '&buildingNumber=' + buildingNumber,
            success: function (data) {
                // var nums = $("#isMainPath").find("option"); //获取select下拉框的所有值
                // if(data.isMainPath != undefined){
                //     for (var j = 1; j < nums.length; j++) {
                //         if ($(nums[j]).val() == data.isMainPath) {
                //             console.log("case1.1")
                //             $(nums[j]).prop('selected',false);
                //             $("#isMainPath").removeAttr("disabled");
                //             $(nums[j]).prop('selected','selected');
                //             $("#isMainPath").prop('disabled','disabled');
                //             break;
                //         }
                //     }
                // }else{
                //     $("#isMainPath").removeAttr("disabled");
                //     $(nums[0]).attr('selected','selected');
                // }

                var numbers = $("#floorNumber").find("option"); //获取select下拉框的所有值
                if(data.floorNumber != undefined){
                    for (var j = 1; j < numbers.length; j++) {
                        if ($(numbers[j]).val() == data.floorNumber) {
                            $(numbers[j]).prop('selected',false);
                            $("#floorNumber").removeAttr("disabled");
                            $(numbers[j]).prop('selected','selected');
                            $("#floorNumber").prop('disabled','disabled');
                            break;
                        }
                    }
                }else{
                    $("#floorNumber").removeAttr("disabled");
                    $(numbers[0]).prop('selected','selected');
                }
            }
        })

    });

    function submitHandler() {
        if ($("#buildingNumber option:selected").val() == '') {
            $.modal.alertWarning("请选择楼栋号！");
            return;
        }
        // if ($("#isMainPath option:selected").val() == '') {
        //     $.modal.alertWarning("请选择是否关键线路！");
        //     return;
        // }


        if ($("#node option:selected").val() == '') {
            $.modal.alertWarning("请项目节点！");
            return;
        }
        if ($("#planEndTime").val() == '') {
            $.modal.alertWarning("请选择计划结束时间！");
            return;
        }

        if ($.validate.form()) {
            var data = $("#form-progress-add").serializeArray();
            $.operate.save(prefix + "/editSave", data);
        }
    }


</script>

</body>
</html>